<template>
  <div class="collect_view">
    <h1 class="title">
      <div @click="$router.go(-1)" class="back">
        <van-image
          width="18"
          height="18"
          src="/img/login/left.png"
          alt="left"
        />
      </div>
      <span class="span">我的收藏</span>
      <div class="search_compile">
        <van-image
          width="18"
          height="18"
          src="/img/collect/search.png"
          alt="search"
          @click="$router.push('/searchPage')"
        />
        <span @click="compile = !compile">{{ compile ? "完成" : "编辑" }}</span>
      </div>
    </h1>
    <!-- 商品 - 搭配 - LOOK -->
    <div class="type_box">
      <van-tabs v-model="activeName">
        <van-tab title="商品" ref="type_li" name="commodity">
          <!-- 没有收藏商品提示 -->
          <div class="prompt" v-if="!lookCollect">
            <van-image
              width="257"
              height="128"
              src="/img/collect/loadingA.jpg"
              alt="loading"
            />
            <p>你还没有收藏任何商品哦～</p>
          </div>
          <!-- 商品栏 -->
          <div class="commodity_bar">
            <!-- 收藏 -->
            <div class="collect_enshrine">
              <!-- 收藏商品类型选择 -->
              <!-- <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
              </van-dropdown-menu> -->
              <div class="collect_commodity_box" v-if="lookCollect">
                <!-- 收藏商品展示 -->
                <ul class="collect_commodity">
                  <li
                    v-for="item in collect"
                    :key="item.id"
                    @click="goDetail(item.id)"
                  >
                    <van-image
                      width="174"
                      height="232"
                      :src="item.img"
                      :alt="item.title"
                    />
                    <img
                      class="img"
                      src="/img/collect/look-over.png"
                      alt="look"
                    />
                    <div class="font">
                      <h6>
                        {{ item.title }}
                      </h6>
                      <p>
                        <span class="money">{{ item.price }}</span>
                        <a class="people_num" href="javascript:;"
                          >{{ item.sells }}人已买</a
                        >
                      </p>
                    </div>
                    <div class="del" v-if="compile">
                      <van-checkbox
                        checked-color="#ff5777"
                        v-model="item.flag"
                        >{{ item.shop }}</van-checkbox
                      >
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 猜你喜欢 -->
            <div class="guess_what_you_like">
              <p class="guess">猜你喜欢</p>
              <!-- <div class="guees_list_box">
                <ul class="guess_list">
                  <li>
                    <div class="img">
                      <van-image
                        width="100%"
                        height="100%"
                        src="https://s5.mogucdn.com/mlcdn/c45406/220531_2cgda9ec0g9842961j7ki1h5505k7_640x960.jpg_400x9999.v1c7E.81.webp"
                        alt="img"
                      />
                      <div class="merchant">
                        <van-image
                          width="18"
                          height="18"
                          src="https://s5.mogucdn.com/mlcdn/c45406/210706_1g99880b30ehe7bd8b37ge506jdga_400x400.jpg_400x9999.v1c7E.81.webp"
                          alt="img"
                        />
                        <span class="name">小甜心_呢</span>
                      </div>
                      <div class="player">
                        <van-image
                          width="100%"
                          height="100%"
                          src="/img/collect/broadcast.png"
                          alt="img"
                        />
                      </div>
                    </div>
                    <div class="font">
                      <p class="brief_introduction">
                        法式性感蕾丝背心女外穿夏季新款辣妹美背内搭黑色短款小吊带上衣
                      </p>
                      <div class="preferential">新人专享满9减2</div>
                      <div class="q_number">销量1</div>
                    </div>
                  </li>
                  <li>
                    <div class="img">
                      <van-image
                        width="100%"
                        height="100%"
                        src="https://s5.mogucdn.com/mlcdn/c45406/220531_2cgda9ec0g9842961j7ki1h5505k7_640x960.jpg_400x9999.v1c7E.81.webp"
                        alt="img"
                      />
                      <div class="merchant">
                        <van-image
                          width="18"
                          height="18"
                          src="https://s5.mogucdn.com/mlcdn/c45406/210706_1g99880b30ehe7bd8b37ge506jdga_400x400.jpg_400x9999.v1c7E.81.webp"
                          alt="img"
                        />
                        <span class="name">小甜心_呢</span>
                      </div>
                      <div class="player">
                        <van-image
                          width="100%"
                          height="100%"
                          src="/img/collect/broadcast.png"
                          alt="img"
                        />
                      </div>
                    </div>
                    <div class="font">
                      <p class="brief_introduction">
                        法式性感蕾丝背心女外穿夏季新款辣妹美背内搭黑色短款小吊带上衣
                      </p>
                      <div class="preferential">新人专享满9减2</div>
                      <div class="q_number">销量1</div>
                    </div>
                  </li>
                </ul>
                <ul class="guess_list con">
                  <li>
                    <div class="img">
                      <van-image
                        width="100%"
                        height="100%"
                        src="https://s5.mogucdn.com/mlcdn/c45406/220531_2cgda9ec0g9842961j7ki1h5505k7_640x960.jpg_400x9999.v1c7E.81.webp"
                        alt="img"
                      />
                      <div class="merchant">
                        <van-image
                          width="18"
                          height="18"
                          src="https://s5.mogucdn.com/mlcdn/c45406/210706_1g99880b30ehe7bd8b37ge506jdga_400x400.jpg_400x9999.v1c7E.81.webp"
                          alt="img"
                        />
                        <span class="name">小甜心_呢</span>
                      </div>
                      <div class="player">
                        <van-image
                          width="100%"
                          height="100%"
                          src="/img/collect/broadcast.png"
                          alt="img"
                        />
                      </div>
                    </div>
                    <div class="font">
                      <p class="brief_introduction">
                        法式性感蕾丝背心女外穿夏季新款辣妹美背内搭黑色短款小吊带上衣
                      </p>
                      <div class="preferential">新人专享满9减2</div>
                      <div class="q_number">销量1</div>
                    </div>
                  </li>
                  <li>
                    <div class="img">
                      <van-image
                        width="100%"
                        height="100%"
                        src="https://s5.mogucdn.com/mlcdn/c45406/220531_2cgda9ec0g9842961j7ki1h5505k7_640x960.jpg_400x9999.v1c7E.81.webp"
                        alt="img"
                      />
                      <div class="merchant">
                        <van-image
                          width="18"
                          height="18"
                          src="https://s5.mogucdn.com/mlcdn/c45406/210706_1g99880b30ehe7bd8b37ge506jdga_400x400.jpg_400x9999.v1c7E.81.webp"
                          alt="img"
                        />
                        <span class="name">小甜心_呢</span>
                      </div>
                      <div class="player">
                        <van-image
                          width="100%"
                          height="100%"
                          src="/img/collect/broadcast.png"
                          alt="img"
                        />
                      </div>
                    </div>
                    <div class="font">
                      <p class="brief_introduction">
                        法式性感蕾丝背心女外穿夏季新款辣妹美背内搭黑色短款小吊带上衣
                      </p>
                      <div class="preferential">新人专享满9减2</div>
                      <div class="q_number">销量1</div>
                    </div>
                  </li>
                </ul>
              </div> -->
              <div class="like">
                <LikeComponents
                  class="like-item"
                  v-for="(item, index) in likeList"
                  :item="item"
                  :key="index"
                />
                <div style="width: 181px"></div>
                <div style="width: 181px"></div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="搭配" name="match">
          <!-- 搭配栏 -->
          <!-- 没有收藏商品提示 -->
          <div class="prompt">
            <van-image
              width="257"
              height="128"
              src="/img/collect/loadingA.jpg"
              alt="loading"
            />
            <p>你还没有收藏任何搭配哦～</p>
          </div>
        </van-tab>
        <van-tab title="LOOK" name="look">
          <!-- LOOK栏 -->
          <!-- 没有收藏商品提示 -->
          <div class="prompt">
            <van-image
              width="257"
              height="128"
              src="/img/collect/loadingB.jpg"
              alt="loading"
            />
            <p>你还没有收藏任何LOOK哦～</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 删除收藏 -->
    <div class="delCollcet" v-if="compile">
      <van-image width="19" height="19" src="/img/collect/delete.png" />
      <span @click="deletePrompt">删除&nbsp; ({{ commodityNum }})</span>
    </div>
    <!-- 删除收藏指示区 -->
    <van-overlay :show="delshow" @click="delshow = false" class="delCommodity">
      <div class="wrapper" @click.stop>
        <div class="block">
          <p>确定删除收藏吗</p>
          <div class="button_box">
            <button @click="delshow = false">取消</button>
            <button @click="del">确认</button>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import LikeComponents from "../../components/shop/LikeComponents.vue";

const throttle = (fn, time) => {
  let timer = null;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        fn.apply(this, args);
      }, time);
    }
  };
};

export default {
  data() {
    return {
      //vant 收藏商品类型选择
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部", value: 0 },
        { text: "降价中", value: 1 },
        { text: "低库存", value: 2 },
        { text: "已售罄", value: 3 },
      ],
      //获取收藏数据
      collect: [],
      // 商品 - 搭配 - LOOK 样式变化
      activeName: "commodity",
      //商品 - 搭配 - LOOK数据
      list: [],
      likeList: [],
      page: 1,
      fn: throttle(this.onScroll, 400),
      //编辑
      compile: false,
      //删除收藏
      delshow: false,
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getList();
      vm.getLike();
      //开启滚动事件
      window.addEventListener("scroll", vm.onScroll);
      //获取收藏数据
      vm.getCollectData();
    });
  },
  beforeRouteUpdate(to, from, next) {
    this.getList();
    this.getLike();
    //开启滚动事件
    window.addEventListener("scroll", this.onScroll);
    //获取收藏数据
    this.getCollectData();

    next();
  },

  methods: {
    //获取收藏数据
    getCollectData() {
      if (localStorage.getItem("collect")) {
        this.collect = JSON.parse(localStorage.getItem("collect"));
      }
    },
    //跳转商品详情页
    goDetail(id) {
      if (this.compile == false) {
        this.$router.push({ name: "goods-detail", params: { id } });
      }
    },
    async getList() {
      let url = `https://apis.netstart.cn/mogujie/shopNav.json`;
      let { data } = await this.$axios(url);
      this.list = data;
    },
    async getLike() {
      let url = `https://apis.netstart.cn/mogujie/goods/personalized`;
      let { data } = await this.$axios(url, { params: { page: this.page } });
      if (data.data?.wall?.docs) {
        this.likeList = [...this.likeList, ...data.data?.wall?.docs];
      }
    },
    onScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (Math.ceil(scrollTop) + windowHeight >= scrollHeight) {
        this.page++;
        this.getLike();
      }
    },
    //删除提示
    deletePrompt() {
      if (this.commodityNum == 0) {
        this.$toast("请先选择商品");
      } else {
        this.delshow = true;
      }
    },
    //删除数据
    del() {
      this.collect = this.collect.filter((item) => !item.flag);
      this.setLocalStroge("collect", this.collect);
      if (this.collect.length == 0) {
        localStorage.removeItem("collect");
      }
      this.delshow = false;
    },
  },
  computed: {
    // 监测收藏数据
    lookCollect() {
      return this.collect.length == 0 ? false : true;
    },
    //监测收藏商品是否选择
    commodityNum() {
      let num = 0;
      if (this.collect.length != 0) {
        for (let i = 0; i < this.collect.length; i++) {
          if (this.collect[i].flag) {
            num += 1;
          }
        }
      }
      return num;
    },
  },
  beforeRouteLeave(to, from, next) {
    //不能用销毁钩子 用了keepalive页面没有触发销毁钩子函数
    window.removeEventListener("scroll", this.fn, true);
    next();
  },
  components: {
    LikeComponents,
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.collect_view {
  background-color: #f6f6f6;
  margin-bottom: 120px;
}
.title {
  position: relative;
  display: flex;
  font-weight: normal;
  font-size: 18px;
  color: #5e5e5e;
  align-items: center;
  border-bottom: 1px solid #c9c7c8;
  background-color: #fafafa;
  .back {
    width: 45px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    color: #7d6363;
  }
  .span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .search_compile {
    display: flex;
    align-items: center;
    position: absolute;
    right: 8px;
    span {
      font-size: 16px;
      color: #333;
      display: inline-block;
      margin-left: 8px;
    }
  }
}
.type_box {
  position: relative;
  position: sticky;
  top: 0;
  z-index: 999;
  .van-tabs {
    flex-direction: column;
  }
}
.commodity_bar {
  padding: 0 9px;
  position: relative;
  // &::before {
  //   position: absolute;
  //   content: "";
  //   height: 37px;
  //   background-color: #fff;
  //   width: 100%;
  //   top: 0;
  //   left: 0;
  // }
  .collect_commodity_box {
    margin-top: 20px;
  }
  .collect_commodity {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 48.7%;
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      background-color: #fff;
      margin-bottom: 9px;
      padding-bottom: 8px;
      z-index: 1;
    }
    .del {
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 9px;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 999;
    }
    .img {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 202px;
      right: 10px;
    }
    .font {
      padding: 0 7.5px;
    }
    h6 {
      width: 100%;
      line-height: 18px;
      text-indent: 4px;
      font-weight: normal;
      color: #5e5e5e;
      font-size: 12px;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*设置隐藏行数*/
      -webkit-box-orient: vertical;
    }
    p {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      padding: 0 2px;
    }
    .money {
      font-size: 14px;
      color: #ff4455;
      font-family: PingFangSC-Medium;
    }
    .people_num {
      font-size: 12px;
      color: #b5b5b5;
    }
  }
  .guess_what_you_like {
    margin-top: 12px;
    .guess {
      font-size: 14px;
      color: #666;
      margin-bottom: 7px;
    }
  }
  .like {
    margin-top: -5px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .like-item {
      margin-top: 10px;
    }
  }
  .guees_list_box {
    display: flex;
    justify-content: space-between;
  }
  .guess_list {
    width: 48.7%;
    &.con li {
      &:nth-of-type(2n) .img {
        height: 261px;
      }
    }
    &.con .img {
      height: 174px;
    }
    li {
      border-radius: 6px;
      overflow: hidden;
      background-color: #fff;
      margin-bottom: 9px;
      &:nth-of-type(2n) .img {
        height: 174px;
      }
    }
    .img {
      height: 261px;
      position: relative;
    }
    .merchant {
      position: absolute;
      bottom: 10px;
      display: flex;
      padding-left: 9px;
      color: #fff;
      font-size: 12px;
      .van-image {
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #fff;
      }
    }
    .name {
      display: inline-block;
      margin-left: 4px;
    }
    .player {
      position: absolute;
      width: 28px;
      height: 28px;
      top: 9px;
      right: 4px;
    }
    .font {
      padding: 9px;
      position: relative;
      padding-bottom: 27px;
    }
    .brief_introduction {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
      color: #333;
    }
    .preferential {
      width: 91px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      border: 1px solid #ff4466;
      border-radius: 3px;
      color: #ff4466;
      font-size: 12px;
      margin-top: 6px;
    }
    .q_number {
      position: absolute;
      bottom: 9px;
      right: 9px;
      width: 42px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      background-color: #ffecef;
      font-size: 12px;
      color: #ff4466;
      border-radius: 12px;
    }
  }
}
.prompt {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  p {
    font-size: 16px;
    color: #666;
    margin-top: 15px;
  }
}
.delCollcet {
  width: 100%;
  height: 50px;
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  color: #5e5e5e;
}
.delCommodity {
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 999999;
  }
  .block {
    width: 69.9%;
    height: 93px;
    background-color: #fff;
    border-radius: 3px;
    p {
      height: 53px;
      line-height: 53px;
      text-align: center;
      font-size: 14px;
      color: #666666;
    }
    .button_box {
      display: flex;
      border-top: 1px solid #cccccc;
    }
    button {
      height: 39px;
      flex: 1;
      font-size: 14px;
      color: #666666;
      border: none;
      background-color: #fff;
      &:nth-of-type(2) {
        border-left: 1px solid #cccccc;
        color: #ff5e7a;
      }
    }
  }
}

::v-deep .van-overlay {
  z-index: 99999;
}
::v-deep .van-tab {
  font-size: 15px;
}
::v-deep .van-tab--active {
  color: #ff5577;
}
::v-deep .van-tabs__line {
  width: 30%;
  height: 1px;
  background-color: #ff5777;
}
::v-deep .van-dropdown-menu {
  width: 50px;
}
::v-deep .van-dropdown-menu__bar {
  box-shadow: none;
  height: 37px;
}
::v-deep .van-dropdown-menu__item {
  justify-content: flex-start;
}
::v-deep .van-dropdown-menu__title {
  padding: 0 4px;
  font-size: 12px;
  color: #666;
}
::v-deep .van-dropdown-menu__title::after {
  border-color: transparent transparent #333333 #333333;
  right: -10px;
}
</style>